<template>
  <div class="page_container">
    <van-nav-bar title="注册-来钱宝" />
    <div class="login_container">
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '手机号格式错误'}]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="inviter_code"
          name="inviter_code"
          label="邀请码"
          placeholder="请输入邀请码"
          :rules="[{ required: true, message: '请填写邀请码'}]"
        />
        <van-field
          v-model="name"
          name="name"
          label="姓名"
          placeholder="请输入姓名用(用于提现)"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="id_card"
          name="id_card"
          label="身份证"
          placeholder="请输入身份证号码(用于提现)"
          :rules="[{ required: true, message: '请填写身份证'}]"
        />
        <div class="yzm">
          <van-field
            style="width: 68%;"
            v-model="code"
            name="code"
            label="验证码"
            placeholder="请输入图片验证码"
            :rules="[{ required: true, message: '图片验证码' }]"
          />

          <van-image width="30%" height="2rem" :src="image_src" @click="changeVerifyImage" />
        </div>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Form, Field, button, Image, NavBar, Toast } from "vant";

Vue.use(Form);
Vue.use(Field);
Vue.use(button);
Vue.use(Image);
Vue.use(NavBar);
Vue.use(Toast);

export default {
  data() {
    return {
      phone: "",
      password: "",
      id: "",
      code: "",
      inviter_code: "",
      name: "",
      id_card: "",
      image_src: ""
    };
  },
  mounted() {
    this.getVerifyCode();
  },
  methods: {
    getVerifyCode() {
      this.$http.get("user/authorization/verify/image/").then(res => {
        if (res.status === 200) {
          (this.id = res.data.result.id),
            (this.image_src = res.data.result.img);
        }
      });
    },
    changeVerifyImage() {
      this.getVerifyCode();
    },
    onSubmit(values) {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner"
      });
      // console.log(values)
      values.account = values.phone;
      values.id = this.id;
      this.$http
        .post("user/authorization/register/", values)
        .then(res => {
          if (res.status === 200) {
            this.$store.state.user.token = res.data.result.token;
            Toast.clear();
            Toast.success(res.data.result.message);
            this.$router.replace({ path: "/home" });
          } else {
            console.log(res);
            Toast.clear();
          }
        })
    }
  }
};
</script>

<style>
.login_container {
  padding: 5rem 0.5rem 0 0.5rem;
}
.yzm {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>